<template>
    <div id="app">
        <div id="nav" v-show="$route.meta.navShow">
            <el-row type="flex">
                <div :span="6" class="logo-name">聚德项目管理系统</div>
                <div class="menu-wrap">
                    <el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal" router
                        active-text-color="#409EFF">
                        <el-menu-item index="/">首页</el-menu-item>
                        <el-menu-item index="/project" v-show="$store.state.user.id_role==1">项目</el-menu-item>
                        <el-menu-item index="/customer" v-show="$store.state.user.id_role==1">账号</el-menu-item>
                        <el-menu-item index="/teams" v-show="$store.state.user.id_role==1">团队</el-menu-item>
                        <el-menu-item index="/management" v-show="$store.state.user.name=='罗思理'">账户管理</el-menu-item>
                        <el-menu-item index="/loadpage" v-show="$store.state.user.id_role==1">落地页管理</el-menu-item>
                         <!-- <el-menu-item index="/management" v-show="$store.state.user.account=='luosili@adjdds.com'">账户管理</el-menu-item> -->
                    </el-menu>
                </div>
                <el-row type="flex" justify="space-around" align="middle" class="nav_sz">
                    <el-popover placement="bottom" width="240" trigger="click">
                        <div v-show="!msgs.length > 0" style="padding: 6px 0;text-align: center;">暂无通知</div>
                        <ul v-show="msgs.length > 0" class="jd-notice">
                            <li v-for="item in msgs" :key="item.id" @click="openMsg(item)">
                                <el-link type="primary">
                                    <i v-if="item.status == 0" class="unread-dot"></i>
                                    <span>&nbsp;{{item.date}}</span>{{item.name}}
                                </el-link>
                            </li>
                        </ul>
                        <!-- <el-row v-if="msgs.length > 0" type="flex" justify="center">
                            <router-link to="/"><el-link type="primary">查看全部</el-link></router-link>
                        </el-row> -->
                        <i slot="reference" class="el-icon-message-solid"></i>
                    </el-popover>
                    <el-popover placement="bottom" width="200" trigger="click">
                        <div class="myde">
                            <ul>
                                <li>UID：{{$store.state.user.uid}}</li>
                                <li>名称：{{$store.state.user.name}}</li>
                                <li>邮箱：{{$store.state.user.account}}</li>
                                <li>部门：{{$store.state.user.depart}}</li>
                                <li>角色：{{$store.state.user.role}}</li>
                                <!-- <li>角色：{{}}</li> -->
                            </ul>
                            <el-row type="flex" justify="center">
                                <el-button type="primary" size="mini" @click="changepass = true">修改密码</el-button>
                                <el-button @click="logout" type="danger" size="mini">退出登录</el-button>
                            </el-row>
                        </div>
                        <i slot="reference" class="el-icon-user-solid"></i>
                    </el-popover>
                </el-row>
                <el-dialog title="修改密码" :visible.sync="changepass" :close-on-click-modal="false" width="30%" center>
                    <el-row type="flex" align="middle" justify="center">
                        <el-form label-width="80px" :model="passwordForm" ref="passwordForm" :rules="passwordFormRules" style="width: 85%;">
                            <el-form-item label="旧密码" prop="oldpass">
                                <el-input type="password" v-model="passwordForm.oldpass" placeholder="请输入旧密码" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" prop="newpass">
                                <el-input type="password" v-model="passwordForm.newpass" placeholder="请输入新密码" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="checkpass">
                                <el-input type="password" v-model="passwordForm.checkpass" placeholder="请再次输入新密码" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <el-row type="flex" align="middle" justify="center">
                        <el-button size="small" @click="changepass = false">取 消</el-button>
                        <el-button size="small" type="primary" :loading="pwdLoading" @click="submitPassword">确定</el-button>
                    </el-row>
                </el-dialog>
            </el-row>
        </div>
        <router-view />
    </div>
</template>
<script>
import { getToken } from '@/util/auth'
import { validatePassword } from '@/settings'
//  import { mapState } from "vuex";
    export default {
        data() {
            var samePassword = (rule, value, callback) => {
                /*eslint no-useless-escape: "error"*/
                if (value != this.passwordForm.newpass) {
                callback(new Error('两次输入密码不一致'))
                return
                }
                callback()
            }
            return {
                pwdLoading: false,
                timer: 0,
                msgs: [],
                changepass: false,
                isShow:true,
                showList:[],
                num:'',
                passwordForm: {
                    oldpass: '',
                    newpass: '',
                    checkpass: '',
                },
                passwordFormRules: {
                    oldpass: [
                        { validator: validatePassword, trigger: 'blur'}
                    ],
                    newpass: [
                        { validator: validatePassword, trigger: 'blur'}
                    ],
                    checkpass: [
                        { validator: samePassword, trigger: 'blur'}
                    ]
                }
            }
        },
        computed: {  
          
            activeMenu() {
                const route = this.$route
                const {
                    meta,
                    path
                } = route
                if (meta.activeMenu) {
                    return meta.activeMenu
                }
                return path
            },
          
        },
        mounted () {
            // 定时取消息处理
            this.loopMsg()
            this.timer = setInterval(this.loopMsg, 10000);
           
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        methods: {
            loopMsg() {
                let val = getToken()
                if (val) {
                    this.$axios.get('/user/message')
                    .then((e) => {
                        // console.log(e)
                        this.msgs = e.data.items
                    }).catch(()=>{
                        
                    })
                }
            },
            openMsg(item) {
                if (item.status != 0) {
                    this.$alert(item.name, '消息内容')
                    return
                }
                this.$confirm(item.name, '消息内容', {
                confirmButtonText: '确认已读',
                cancelButtonText: '取消',
                type: 'info'
                }).then(() => {
                    // 发送已读请求
                    this.$axios.get('/user/message/read', {id: item.id}).then(() => {
                        let ele = this.msgs.find(e => {
                            return e.id == item.id
                        })
                        if (ele) {
                            ele.status = 1
                        }
                    })
                }).catch(() => {
                })
            },
            logout() {
                this.$confirm('确定要退出登录吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$store.dispatch('user/logout').then(() => {
                        console.log('getInfo ok')
                        this.$router.push({ path: '/login' })
                    }).catch((e) => {
                        console.log(e,111)
                        this.$router.push({ path: '/login' })
                    })
                    // this.$axios.get('/user/logout')
                    // .then(() => {
                    //     setToken('')
                    //     this.$router.replace({ path: "/login"})
                    // })
                    // .catch(err => {
                    //     setToken('')
                    //     this.$message.error(err);
                    //     this.$router.replace({ path: "/login"})
                    // })
                }).catch(() => {
                })
                
            },
            submitPassword() {
                this.$refs['passwordForm'].validate((valid) => {
                    if (valid) {
                        this.pwdLoading = true
                        this.$axios.post('/user/password', this.passwordForm).then((e)=> {
                            this.pwdLoading = false
                            this.changepass = false
                            this.$message({
                                message: e.msg ? e.msg : '修改成功',
                                type: 'success'
                            })
                        }).catch(() => {
                            this.pwdLoading = false
                        })
                    }
                })
            }
        }
    }
</script>
<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
    }

    .logo-name {
        width: 400px;
        height: 60px;
        line-height: 60px;
        text-align: left;
        color: #409EFF;
        background-color: #fff;
        text-indent: 50px;
        border-bottom: solid 1px #e6e6e6;
    }

    .menu-wrap {
        width: 100%;
    }

    .nav_sz {
        width: 160px;
        height: 60px;
        font-size: 24px;
        background-color: #fff;
        color: #409EFF;
        border-bottom: solid 1px #e6e6e6;
        cursor: pointer;
    }

    .myde ul {
        margin-bottom: 5px;
    }

    .myde ul li {
        text-align: left;
        padding-bottom: 5px;
    }

    .jd-notice {
        margin-bottom: 5px;
    }

    .jd-notice li {
        font-size: 14px;
        color: #666;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .jd-notice span {
        color: #888;
        padding-right: 5px;
        padding-left: 5px;
    }
    .unread-dot{
        display:block;
        background:#f00;
        border-radius:6px;
        width:6px;
        height:6px;
        top:6px;
        left:0px;
        position:absolute;
    }
    .el-icon-message-solid-bak{
        -webkit-animation: twinkling 1.5s infinite; 
    }
    .animated{
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }
    @-webkit-keyframes twinkling{
        0%{
            opacity: 0.2;
        }
        100%{
            opacity: 1;
        }
    }
    @keyframes twinkling{
        0%{
            opacity: 0.2;
        }
        100%{
            opacity: 1;
        }
    }
</style>
